<template>
	<view class="container pageBg">
		<view class="add-member-card">
			<view class="header">
				<text class="title">添加家庭成员</text>
			</view>
			<view class="input-group">
				<input v-model="userAccount" placeholder="输入用户账号" class="input" />
				<button class="search-button" @click="searchUser">查询</button>
			</view>
			<view v-if="true" class="results">
				<view class="members">
					<view v-for="member in searchResults" :key="member.id" class="member-card">
						<image :src="member.avatar || '/static/default-avatar.png'" class="avatar" mode="aspectFill" />
						<view class="member-info">
							<text class="name">{{ member.name }}</text>
						</view>
						<button class="search-button" @click="addUser(member.account)">添加</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,ref
	} from 'vue';

	const searchResults = reactive([]);
    const userAccount = ref('')

	const searchUser = () => {
		console.log("点击查询按钮" )
		uni.request({
			url: "http://localhost:8081/sysUser/getUserByAccount",
			method: "GET",
			data: {
				account: userAccount.value
			},
			header: {
				'Authorization': 'Bearer ' + uni.getStorageSync('token') // 从本地存储获取token
			},
			success: (res) => {
				console.log(res)
				if (res.data.code === "200") {
					searchResults.splice(0, searchResults.length, ...res.data.result.map(user => ({
						id: user.account,
						name: user.nickname,
						account: user.account,
						relation: '成员',
						avatar: user.avatar
					})));
				} else {
					uni.showToast({
						title: "查询失败",
						icon: 'none'
					})
				}
			},
			fail: () => {
				uni.showToast({
					title: '请求失败',
					icon: 'none'
				})
			}
		});
	};

	const addUser = (account) => {
		console.log(account)
		uni.request({
			url: "http://localhost:8081/sysUser/addUserToFamily?account="+account, 
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'Authorization': 'Bearer ' + uni.getStorageSync('token') // 从本地存储获取token
			},
			success: (res) => {
				console.log(res)
				if (res.data.code === "200") {
					setTimeout(function() {
						uni.navigateBack();
					}, 2000);
					uni.showToast({
						title: '邮件通知成功,请通知对方查看邮件! ',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: "查询失败", 
						icon: 'none'
					})
				}
			},
			fail: () => {
				uni.showToast({
					title: '请求失败',
					icon: 'none'
				})
			}
		});
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.add-member-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 30rpx;
	}

	.header {
		margin-bottom: 30rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			display: block;
			text-align: center;
		}
	}

	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.input {
			flex: 1;
			padding: 10rpx;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.search-button {
			background: linear-gradient(45deg, #ff9a44, #ff6b6b);
			color: #fff;
			border-radius: 8rpx;
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
		}
	}

	.members {
		.member-card {
			.search-button {
				background: linear-gradient(45deg, #ff9a44, #ff6b6b);
				color: #fff;
				border-radius: 8rpx;
				padding: 0 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
			}
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border-bottom: none;
			}

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.member-info {
				.name {
					font-size: 30rpx;
					color: #333;
					display: block;
				}

				.age-relation {
					font-size: 26rpx;
					color: #666;
				}
			}
		}
	}

	.results {
		.result-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border-bottom: none;
			}

			.add-button {
				background: #007BFF;
				color: #fff;
				border-radius: 8rpx;
				padding: 0 20rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
			}
		}
	}
</style>